<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>js组成 | 一只老鸟</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="icon" href="/img/rty-docs.ico">
    <script async="async" src="https://www.googletagmanager.com/gtag/js?id=UA-145250139-1"></script>
    <script>window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
    
      gtag('config', 'UA-145250139-1');</script>
    <script>var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?96bef00c01d8ee7ee249abc380b9e5ab";
        var s = document.getElementsByTagName("script")[0]; 
        s.parentNode.insertBefore(hm, s);
      })();</script>
    <meta name="description" content="Welcome to my docs">
    <meta name="keywords" content="jkx,晋凯旋,jkxxmd,vue,js,html,css,英文歌曲,bruno">
    
    <link rel="preload" href="/assets/css/0.styles.eb327ba5.css" as="style"><link rel="preload" href="/assets/js/app.2b0e3d52.js" as="script"><link rel="preload" href="/assets/js/2.87232f21.js" as="script"><link rel="preload" href="/assets/js/37.89852ede.js" as="script"><link rel="prefetch" href="/assets/js/10.1e2b3af9.js"><link rel="prefetch" href="/assets/js/11.bfd5eea1.js"><link rel="prefetch" href="/assets/js/12.11b2a8d0.js"><link rel="prefetch" href="/assets/js/13.d230b1b6.js"><link rel="prefetch" href="/assets/js/14.8208356f.js"><link rel="prefetch" href="/assets/js/15.badc1e67.js"><link rel="prefetch" href="/assets/js/16.76e6aeba.js"><link rel="prefetch" href="/assets/js/17.ea4ddef2.js"><link rel="prefetch" href="/assets/js/18.e3d36bd1.js"><link rel="prefetch" href="/assets/js/19.aa1bac84.js"><link rel="prefetch" href="/assets/js/20.838765cd.js"><link rel="prefetch" href="/assets/js/21.14466225.js"><link rel="prefetch" href="/assets/js/22.38392bba.js"><link rel="prefetch" href="/assets/js/23.71895fbc.js"><link rel="prefetch" href="/assets/js/24.766c8a49.js"><link rel="prefetch" href="/assets/js/25.6b02ff9f.js"><link rel="prefetch" href="/assets/js/26.ef22337a.js"><link rel="prefetch" href="/assets/js/27.0334ed21.js"><link rel="prefetch" href="/assets/js/28.811fb438.js"><link rel="prefetch" href="/assets/js/29.f687b8ad.js"><link rel="prefetch" href="/assets/js/3.3fc78177.js"><link rel="prefetch" href="/assets/js/30.0eef1a68.js"><link rel="prefetch" href="/assets/js/31.44dad2fc.js"><link rel="prefetch" href="/assets/js/32.959ca33d.js"><link rel="prefetch" href="/assets/js/33.d27370cb.js"><link rel="prefetch" href="/assets/js/34.73319d5f.js"><link rel="prefetch" href="/assets/js/35.09513538.js"><link rel="prefetch" href="/assets/js/36.c77663c8.js"><link rel="prefetch" href="/assets/js/38.a9026d97.js"><link rel="prefetch" href="/assets/js/39.2cb07eac.js"><link rel="prefetch" href="/assets/js/4.50419328.js"><link rel="prefetch" href="/assets/js/40.7694c8be.js"><link rel="prefetch" href="/assets/js/41.0b071795.js"><link rel="prefetch" href="/assets/js/42.731a77fd.js"><link rel="prefetch" href="/assets/js/43.e340c04a.js"><link rel="prefetch" href="/assets/js/44.32723933.js"><link rel="prefetch" href="/assets/js/45.fddbc294.js"><link rel="prefetch" href="/assets/js/46.7227ca9a.js"><link rel="prefetch" href="/assets/js/47.e445b894.js"><link rel="prefetch" href="/assets/js/48.22f08eaa.js"><link rel="prefetch" href="/assets/js/49.1ee7be95.js"><link rel="prefetch" href="/assets/js/5.f4c7dd9b.js"><link rel="prefetch" href="/assets/js/50.620525ff.js"><link rel="prefetch" href="/assets/js/51.23ef9c37.js"><link rel="prefetch" href="/assets/js/52.ab599220.js"><link rel="prefetch" href="/assets/js/53.6f0a5a12.js"><link rel="prefetch" href="/assets/js/54.0af9ce80.js"><link rel="prefetch" href="/assets/js/55.9a619ce4.js"><link rel="prefetch" href="/assets/js/56.d3eb58e2.js"><link rel="prefetch" href="/assets/js/57.cec694aa.js"><link rel="prefetch" href="/assets/js/58.215ff512.js"><link rel="prefetch" href="/assets/js/59.67b4a2d9.js"><link rel="prefetch" href="/assets/js/6.35564b30.js"><link rel="prefetch" href="/assets/js/60.10fa328d.js"><link rel="prefetch" href="/assets/js/61.eb384a7b.js"><link rel="prefetch" href="/assets/js/62.21995735.js"><link rel="prefetch" href="/assets/js/63.d3376937.js"><link rel="prefetch" href="/assets/js/64.9dc17e46.js"><link rel="prefetch" href="/assets/js/65.faaf4be5.js"><link rel="prefetch" href="/assets/js/66.82d4fd2e.js"><link rel="prefetch" href="/assets/js/67.766e8bbb.js"><link rel="prefetch" href="/assets/js/68.e00a5e5f.js"><link rel="prefetch" href="/assets/js/69.0f9198d3.js"><link rel="prefetch" href="/assets/js/7.826495ef.js"><link rel="prefetch" href="/assets/js/70.05ef2cdd.js"><link rel="prefetch" href="/assets/js/71.0da0e95b.js"><link rel="prefetch" href="/assets/js/72.fd1cda42.js"><link rel="prefetch" href="/assets/js/73.907aa3c6.js"><link rel="prefetch" href="/assets/js/74.dec02a91.js"><link rel="prefetch" href="/assets/js/75.8610ce53.js"><link rel="prefetch" href="/assets/js/76.db9000c6.js"><link rel="prefetch" href="/assets/js/77.fa0311a2.js"><link rel="prefetch" href="/assets/js/78.33ae2bd0.js"><link rel="prefetch" href="/assets/js/79.879fa638.js"><link rel="prefetch" href="/assets/js/8.7a30ba0c.js"><link rel="prefetch" href="/assets/js/80.898b981f.js"><link rel="prefetch" href="/assets/js/81.b606e1f8.js"><link rel="prefetch" href="/assets/js/82.5006eb1e.js"><link rel="prefetch" href="/assets/js/83.604f41d2.js"><link rel="prefetch" href="/assets/js/84.2e649063.js"><link rel="prefetch" href="/assets/js/85.50f34442.js"><link rel="prefetch" href="/assets/js/86.aee7b865.js"><link rel="prefetch" href="/assets/js/87.9b812977.js"><link rel="prefetch" href="/assets/js/88.52e08a6c.js"><link rel="prefetch" href="/assets/js/9.7b6af510.js">
    <link rel="stylesheet" href="/assets/css/0.styles.eb327ba5.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">一只老鸟</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">
  主页
</a></div><div class="nav-item"><a href="/components/introduction.html" class="nav-link">
  VUE
</a></div><div class="nav-item"><a href="/english/introduction.html" class="nav-link">
  Javascript
</a></div><div class="nav-item"><a href="/music/introduction.html" class="nav-link">
  Html5
</a></div><div class="nav-item"><a href="/oral/introduction.html" class="nav-link">
  CSS
</a></div> <a href="https://github.com/jgsrty/jgsrty.github.docs" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">
  主页
</a></div><div class="nav-item"><a href="/components/introduction.html" class="nav-link">
  VUE
</a></div><div class="nav-item"><a href="/english/introduction.html" class="nav-link">
  Javascript
</a></div><div class="nav-item"><a href="/music/introduction.html" class="nav-link">
  Html5
</a></div><div class="nav-item"><a href="/oral/introduction.html" class="nav-link">
  CSS
</a></div> <a href="https://github.com/jgsrty/jgsrty.github.docs" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><a href="/english/introduction.html" class="sidebar-link">导读</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>2019十二月(December)</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/english/2019/2019-December/What Is a Calorie.html" class="sidebar-link">对象：{ }</a></li><li><a href="/english/2019/2019-December/Why Is Water so Important.html" class="sidebar-link">水为何如此重要</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019十一月(November)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019十月(October)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019九月(September)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019八月(August)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019七月(July)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019六月(June)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019年五月(May)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019年四月(April)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019年三月(March)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019年二月(Feburary)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019年一月(January)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2018年十二月(December)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>2018年十一月(November)</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/english/2018/2018-November/Seize the Day.html" class="active sidebar-link">js组成</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/english/2018/2018-November/Seize the Day.html#bom" class="sidebar-link">BOM:</a></li><li class="sidebar-sub-header"><a href="/english/2018/2018-November/Seize the Day.html#window-窗口window-open-url-新网页或者空白页-标题-可选-网页的基本属性-width-xx-height-xx-window-documentwindow-onload-function-页面加载-dom结构-resource-资源-图片-js的src-link-href-css-video-audio-src-window-onscroll-function-alert-locationlocation-href-http-www-baidu-com-页面打开就跳转-能后退到之前页面-保留历史location-assign-http-www-baidu-com-页面打开就跳转-能后退到之前页面location-replace-http-www-baidu-com-页面打开就跳转-不能后退到之前页面-替换掉之前的地址location-reload-页面打开就重新加载href-地址栏地址-获取或设置。host-主机名-端口houstname-主机名protocol-协议-http超文本传输协议-https-加密-ftp-文件传输协议-单独存储文件的-file-本地的文件-port-端口search-就是地址栏参数。-开始-hash-开始reload-重新加载。replace-载入新的页面-不能退回之前页面-而href能退回去replace-http-www-baidu-com-assign-载入新的页面-能后退到之前页面。-history历史back-只能后退一步-forward-只能前进一步-go-指定跳转-可以前进可以后退-go-n-n-0当前页面-n-0前进-n-0后退-screen屏幕screen-width-实际屏幕宽度screen-availwidth-减去任务栏的宽度" class="sidebar-link">----window-窗口
window.open(url(新网页或者空白页)，&quot;标题 可选&quot;,网页的基本属性（width:xx;height:xx）)
window.document
window.onload=function(){
页面加载,dom结构+resource(资源 图片，js的src)
link href=&quot;...css&quot;
video,audio src
}
window.onscroll=function(){
}
alert()
----location
location.href=&quot;http//www.baidu.com&quot; 页面打开就跳转 能后退
到之前页面 保留历史
location.assign(&quot;http//www.baidu.com&quot;); 页面打开就跳转 能后退
到之前页面
location.replace(&quot;http//www.baidu.com&quot; 页面打开就跳转 不能后
退到之前页面 替换掉之前的地址
location.reload( );页面打开就重新加载
href: 地址栏地址，获取或设置。
host: 主机名+端口
houstname: 主机名
protocol: 协议 -http超文本传输协议
-https:加密
-ftp: 文件传输协议（单独存储文件的）
file：(本地的文件)
port: 端口
search: 就是地址栏参数。？开始；
hash: #开始
reload（） 重新加载。
replace() 载入新的页面,不能退回之前页面 而href
能退回去
replace(&quot;http//www.baidu.com&quot;)
assign() 载入新的页面,能后退到之前页面。
----history历史
back() 只能后退一步， forward()--只能前进一步， go()--指定跳转
（可以前进可以后退）
go(n) n=0当前页面 n&gt;0前进;n&lt;0后退
----screen屏幕
screen.width 实际屏幕宽度
screen.availWidth 减去任务栏的宽度</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/english/2018/2018-November/Seize the Day.html#一、什么是bom" class="sidebar-link">一、什么是BOM？</a></li><li class="sidebar-sub-header"><a href="/english/2018/2018-November/Seize the Day.html#二、关于bom知识的思维导图" class="sidebar-link">二、关于BOM知识的思维导图</a></li><li class="sidebar-sub-header"><a href="/english/2018/2018-November/Seize the Day.html#三、主流浏览器的介绍" class="sidebar-link">三、主流浏览器的介绍</a></li><li class="sidebar-sub-header"><a href="/english/2018/2018-November/Seize the Day.html#四、bom对象" class="sidebar-link">四、BOM对象</a></li><li class="sidebar-sub-header"><a href="/english/2018/2018-November/Seize the Day.html#五、窗口尺寸与大小" class="sidebar-link">五、窗口尺寸与大小</a></li></ul></li><li class="sidebar-sub-header"><a href="/english/2018/2018-November/Seize the Day.html#_6-0cookie-通过浏览器存用户信息到客户端本地磁盘上的技术。" class="sidebar-link">6.0Cookie:通过浏览器存用户信息到客户端本地磁盘上的技术。</a></li><li class="sidebar-sub-header"><a href="/english/2018/2018-November/Seize the Day.html#_7-js中对象-js中所有事物都是对象。" class="sidebar-link">7.Js中对象：js中所有事物都是对象。</a></li></ul></li><li><a href="/english/2018/2018-November/The Religion of a Doctor.html" class="sidebar-link">Document Object Model DOM</a></li><li><a href="/english/2018/2018-November/World Inequality and Complexity 1.html" class="sidebar-link">面向对象</a></li><li><a href="/english/2018/2018-November/World Inequality and Complexity 2.html" class="sidebar-link">js最全面的数组操作合集</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2018年十月(October)</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="js组成"><a href="#js组成" class="header-anchor">#</a> js组成</h1> <p>ECMA:语法规范
dom:文档对象模型
bom:浏览器对象模型
oop:面向对象
ajax::</p> <h2 id="bom"><a href="#bom" class="header-anchor">#</a> BOM:</h2> <h2 id="window-窗口window-open-url-新网页或者空白页-标题-可选-网页的基本属性-width-xx-height-xx-window-documentwindow-onload-function-页面加载-dom结构-resource-资源-图片-js的src-link-href-css-video-audio-src-window-onscroll-function-alert-locationlocation-href-http-www-baidu-com-页面打开就跳转-能后退到之前页面-保留历史location-assign-http-www-baidu-com-页面打开就跳转-能后退到之前页面location-replace-http-www-baidu-com-页面打开就跳转-不能后退到之前页面-替换掉之前的地址location-reload-页面打开就重新加载href-地址栏地址-获取或设置。host-主机名-端口houstname-主机名protocol-协议-http超文本传输协议-https-加密-ftp-文件传输协议-单独存储文件的-file-本地的文件-port-端口search-就是地址栏参数。-开始-hash-开始reload-重新加载。replace-载入新的页面-不能退回之前页面-而href能退回去replace-http-www-baidu-com-assign-载入新的页面-能后退到之前页面。-history历史back-只能后退一步-forward-只能前进一步-go-指定跳转-可以前进可以后退-go-n-n-0当前页面-n-0前进-n-0后退-screen屏幕screen-width-实际屏幕宽度screen-availwidth-减去任务栏的宽度"><a href="#window-窗口window-open-url-新网页或者空白页-标题-可选-网页的基本属性-width-xx-height-xx-window-documentwindow-onload-function-页面加载-dom结构-resource-资源-图片-js的src-link-href-css-video-audio-src-window-onscroll-function-alert-locationlocation-href-http-www-baidu-com-页面打开就跳转-能后退到之前页面-保留历史location-assign-http-www-baidu-com-页面打开就跳转-能后退到之前页面location-replace-http-www-baidu-com-页面打开就跳转-不能后退到之前页面-替换掉之前的地址location-reload-页面打开就重新加载href-地址栏地址-获取或设置。host-主机名-端口houstname-主机名protocol-协议-http超文本传输协议-https-加密-ftp-文件传输协议-单独存储文件的-file-本地的文件-port-端口search-就是地址栏参数。-开始-hash-开始reload-重新加载。replace-载入新的页面-不能退回之前页面-而href能退回去replace-http-www-baidu-com-assign-载入新的页面-能后退到之前页面。-history历史back-只能后退一步-forward-只能前进一步-go-指定跳转-可以前进可以后退-go-n-n-0当前页面-n-0前进-n-0后退-screen屏幕screen-width-实际屏幕宽度screen-availwidth-减去任务栏的宽度" class="header-anchor">#</a> ----window-窗口
window.open(url(新网页或者空白页)，&quot;标题 可选&quot;,网页的基本属性（width:xx;height:xx）)
window.document
window.onload=function(){
页面加载,dom结构+resource(资源 图片，js的src)
link href=&quot;...css&quot;
video,audio src
}
window.onscroll=function(){
}
alert()
----location
location.href=&quot;http//www.baidu.com&quot; 页面打开就跳转 能后退
到之前页面 保留历史
location.assign(&quot;http//www.baidu.com&quot;); 页面打开就跳转 能后退
到之前页面
location.replace(&quot;http//www.baidu.com&quot; 页面打开就跳转 不能后
退到之前页面 替换掉之前的地址
location.reload( );页面打开就重新加载
href: 地址栏地址，获取或设置。
host: 主机名+端口
houstname: 主机名
protocol: 协议 -http超文本传输协议
-https:加密
-ftp: 文件传输协议（单独存储文件的）
file：(本地的文件)
port: 端口
search: 就是地址栏参数。？开始；
hash: #开始
reload（） 重新加载。
replace() 载入新的页面,不能退回之前页面 而href
能退回去
replace(&quot;http//www.baidu.com&quot;)
assign() 载入新的页面,能后退到之前页面。
----history历史
back() 只能后退一步， forward()--只能前进一步， go()--指定跳转
（可以前进可以后退）
go(n) n=0当前页面 n&gt;0前进;n&lt;0后退
----screen屏幕
screen.width 实际屏幕宽度
screen.availWidth 减去任务栏的宽度</h2> <hr> <h3 id="一、什么是bom"><a href="#一、什么是bom" class="header-anchor">#</a> 一、什么是BOM？</h3> <p>BOM：Browser Object Model 是浏览器对象模型，浏览器对象模型提供了独立与内容的、可以与浏览器窗口进
行互动的对象结构，BOM由多个对象构成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是
该对象的子对象。</p> <h3 id="二、关于bom知识的思维导图"><a href="#二、关于bom知识的思维导图" class="header-anchor">#</a> 二、关于BOM知识的思维导图</h3> <h3 id="三、主流浏览器的介绍"><a href="#三、主流浏览器的介绍" class="header-anchor">#</a> 三、主流浏览器的介绍</h3> <p>浏览器内核主要指的是浏览器的渲染引擎，2013 年以前，代表有 Trident（IE），Gecko（firefox），Webkit（Safari
chrome 等）以及 Presto（opera)。2013 年，谷歌开始研发 blink 引擎，chrome 28 以后开始使用，而 opera 则放弃了自主
研发的 Presto 引擎，投入谷歌怀抱，和谷歌一起研发 blink 引擎，国内各种 chrome系的浏览器（360、UC、QQ、2345 等
等）也纷纷放弃 webkit，投入 blink 的怀抱。
移动端的浏览器内核主要说的是系统内置浏览器的内核。
目前移动设备浏览器上常用的内核有 Webkit，Blink，Trident，Gecko 等，其中 iPhone 和 iPad 等苹果 iOS 平台主要是
WebKit，Android 4.4 之前的 Android 系统浏览器内核是 WebKit，Android4.4 系统浏览器切换到了Chromium，内核是
Webkit 的分支 Blink，Windows Phone 8 系统浏览器内核是 Trident。</p> <h3 id="四、bom对象"><a href="#四、bom对象" class="header-anchor">#</a> 四、BOM对象</h3> <ol><li>window 对象，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性；</li> <li>document 对象，文档对象；</li> <li>location 对象，浏览器当前URL信息；</li> <li>navigator 对象，浏览器本身信息；</li> <li>screen 对象，客户端屏幕信息；</li> <li>history 对象，浏览器访问历史信息；
1）、Window对象：BOM的核心对象是window，它表示浏览器的一个实例。在浏览器中，window对象有双重角色，它既是通过
javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。
所有
JavaScript 全局
对象、函数以及
变量均自动成为
window 对象的
成员。
全局变量是
window 对象的
属性。
全局函数是
window 对象的
方法。
window对象常用方法有
弹框类的方法。前面省略
window
alert('提示信息')
confirm(&quot;确认信息&quot;)
prompt(&quot;弹出输入框&quot;)
open(&quot;url地址&quot;，“打开
的方式（可以是-self或black）”，“新窗口的
大小”）注：如果url为
空，则默认打开一个空白
页面，如果打开方式为
空，则默认为新窗口方式
打开页面。返回值为：返
回新打开窗口的window对
象
close() 关闭当前的网
页。 注：存在兼容性问
题：FF：禁止设置关闭浏览器的代码
Chrome：默认直接关闭
IE：询问用户
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸
定时器，清除定时器。
setTimeout(函数，时间) 只执行一次
setInterval(函数，时间) 无限执行
clearTimeout/clearInterval(定时器名称) 清除定时器
2）、location对象
window.location对象：用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。在编写时可不使用 window 这个前
缀。
location.herf = 'url地址'
hash 返回#号后面的字符串，不包含散列，则返回空字符串。
host 返回服务器名称和端口号
pathname 返回目录和文件名。 /project/test.html
search 返回？号后面的所有值。
port 返回URL中的指定的端口号，如URL中不包含端口号返回空字符串
portocol 返回页面使用的协议。 http:或https:
3）、navigator对象
window.navigator 对象包含有关访问者浏览器的信息。在编写时可不使用 window 这个前缀。
navigator.platform：操作系统类型；
navigator.userAgent：浏览器设定的User-Agent字符串。
navigator.appName：浏览器名称；
navigator.appVersion：浏览器版本；
navigator.language：浏览器设置的语言；
userAgent是最常用的属性，用来完成浏览器判断。</li> <li>if(window.navigator.userAgent.indexOf('MSIE')!=-1){</li> <li>alert('我是IE');</li> <li>}else{</li> <li>alert('我不是IE');</li> <li>}
4）、screen对象
window.screen 对象包含有关用户屏幕的信息。
screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。
screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。
document.write(screen.availHeight+screen.availWidth);//获取屏幕的宽度和高度之和
5）、history对象
window.history 对象包含浏览器的历史。为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。
history.back() - 加载历史列表中的前一个 URL。返回上一页。
history.forward() - 加载历史列表中的下一个 URL。返回下一页。
go(“参数”) -1表示上一页，1表示下一页。
综合以上，页面跳转的方法有：</li> <li>1、window.location.href = '你所要跳转到的页面';</li> <li>2、window.open('你所要跳转到的页面’);</li> <li>3、window.history.back(-1):返回上一页</li> <li>4、window.history.go(-1/1):返回上一页或下一页五、</li> <li>5、history.go(&quot;baidu.com&quot;)；</li></ol> <h3 id="五、窗口尺寸与大小"><a href="#五、窗口尺寸与大小" class="header-anchor">#</a> 五、窗口尺寸与大小</h3> <p>可视区尺寸： document.documentElement.clientWidth
document.documentElement.clientHeight
滚动条滚动距离： document.documentElement.clientScrollTop
document.documentElement.clientScrollLeft
存在兼容性问题（Chrome与其它浏览器不同），解决办法如下</p> <ol><li>var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;</li> <li>var scrollLeft = document.documentElement.scrollTop||document.body.scrollLeft;
内容高/宽：元素.scrollHeight/scrollWidth
当一个时间发生时鼠标到页面可视区的距离：clientX/clientY
六、系统对话框
alert()、confirm()和prompt()</li> <li>&lt;scripttype=&quot;text/javascript&quot;&gt;</li> <li>alert(&quot;Hello world!&quot;);</li> <li>script&gt;</li> <li>&lt;scripttype=&quot;text/javascript&quot;&gt;</li> <li>/*</li> <li>判断用户点击了OK还是Cancel，可以检查confirm()方法返回的布尔值：true表示单击了OK，false表示单击了
Cancel或单击了右上角的X按钮。</li> <li>*/</li> <li>if (confirm(&quot;Are you sure?&quot;)) {</li> <li>alert(&quot;I'm so glad you're sure! &quot;);</li> <li>} else {</li> <li>alert(&quot;I'm sorry to hear you're not sure. &quot;);</li> <li>}</li> <li>script&gt;￥</li> <li>&lt;scripttype=&quot;text/javascript&quot;&gt;</li> <li>/*</li> <li>prompt()方法用来生成一个&quot;提示&quot;框，用于提示用户输入一些文本。提示框除了显示OK和Cancel按钮之外 ，还会显
示一个文本输入域，用来输入文本内容。该方法接收两个参数：要显示给用户的文本提示和文本输入域的默认值(可以是
一个空字符串)</li> <li>*/</li> <li>var result = prompt(&quot;What is your name? &quot;, &quot;&quot;);</li> <li>if (result !== null) {</li> <li>alert(&quot;Welcome, &quot; + result);</li> <li>}</li> <li>script&gt;</li></ol> <hr> <p>1.BOM：浏览器对象模型。将整个浏览器看作是一个对象。js中所有成员变量、成员方法都是浏览器对
象的属性和方法。所有的其他对象都是浏览器对象子对象。
2.BOM模型图：
3.location对象：
3.1：常用属性：location.href
3.1.1:获得当前页面的URL地址：location.href (window.location.href)
3.1.2:跳转到另一个页面（效果与超链接的效果相同）：location.href=&quot;新页面地址&quot;;
(window.location.href=&quot;新页面地址&quot;😉
（window.location=&quot;新页面地址&quot;;）
3.2：常用方法：
3.2.1：重新加载当前文档：location.reload();
eg:location.reload();
3.2.2：用新的文档替换当前文档(页面还是同一个页面)：location.replace(&quot;新页面&quot;);
eg:location.replace(&quot;2.html&quot;);
4.history对象：
4.1：常用方法：
4.1.1：前进：history.forward() &lt;=&gt; history.go(1);
4.1.2：后退：history.back() &lt;=&gt; history.go(-1);
5.window对象：
常用方法：
5.1：确定框：alert(&quot;内容&quot;);
5.2：确定取消框：confirm(&quot;内容&quot;); 点击确定返回true,点击取消返回false；
eg:var result=confirm(&quot;确定要删除吗？&quot;);
if (result==true) {
alert(&quot;删除成功&quot;);
}
5.3：输入框：prompt(&quot;提示信息&quot;,【&quot;默认值&quot;】)；返回的结果就是输入的值；
eg:var content=prompt(&quot;请输入用户名&quot;,&quot;sx&quot;);
5.4：弹出一个窗体：window.open(&quot;URL&quot;,&quot;窗体名称&quot;,&quot;窗体的特征&quot;);
eg:window.open(&quot;2.html&quot;,&quot;&quot;,&quot;width=200,height=200,left=300,top=200&quot;);
5.5：关闭窗体：window.close();只有通过 JavaScript 代码打开的窗口才能够由 JavaScript
代码关闭。这阻止了恶意的脚本终止用户的浏览器。
5.6：在指定的毫秒数后调用函数或计算表达式。window.setTimeout(&quot;操作&quot;，毫秒)；
eg:var t1;
function show5(){
t1=window.setTimeout(function(){
alert(&quot;休息一下&quot;);
},10000);
}
5.7：取消由 setTimeout() 方法设置的 timeout。window.clearTimeout(函数名)；
eg:window.clearTimeout(t1);
eg:function changeTime(){
setTimeout(function(){
//获得系统时间
var today=new Date();
var year=today.getFullYear();
var month=today.getMonth()+1;
var day=today.getDate();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
document.getElementById(&quot;d1&quot;).innerHTML=year+&quot;-&quot;+month+&quot;-&quot;+day+&quot;
&quot;+h+&quot;:&quot;+m+&quot;:&quot;+s;
changeTime();
},1000);
}
function show1(){
//获得系统时间
var today=new Date();
var year=today.getFullYear();
var month=today.getMonth()+1;
var day=today.getDate();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
document.getElementById(&quot;d1&quot;).style.fontSize=&quot;20px&quot;;
document.getElementById(&quot;d1&quot;).innerHTML=year+&quot;-&quot;+month+&quot;-&quot;+day+&quot; &quot;+h+&quot;:&quot;+m+&quot;:&quot;+s;
changeTime();
}
5.8：按照指定的周期（以毫秒计）来调用函数或计算表达式。window.setInterval(&quot;操作&quot;，
毫秒);
eg:var t2;
function show7(){
t2=window.setInterval(function(){
alert(&quot;下课了&quot;);
},5000);
}
eg:function showTime(){
//获得系统时间
var today=new Date();
var year=today.getFullYear();
var month=today.getMonth()+1;
var day=today.getDate();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
document.getElementById(&quot;d1&quot;).innerHTML=
year+&quot;-&quot;+month+&quot;-&quot;+day+&quot; &quot;+h+&quot;:&quot;+m+&quot;:&quot;+s;
}
function show1(){
showTime();
setInterval(&quot;showTime()&quot;,1000);
}
5.9：取消由 setInterval() 设置的 timeout。clearInterval(id_of_setinterval)
eg:window.clearInterval(t2);</p> <h2 id="_6-0cookie-通过浏览器存用户信息到客户端本地磁盘上的技术。"><a href="#_6-0cookie-通过浏览器存用户信息到客户端本地磁盘上的技术。" class="header-anchor">#</a> 6.0Cookie:通过浏览器存用户信息到客户端本地磁盘上的技术。</h2> <p>存值特点：按Key-Value对方式存值。如果Cookie存值时，不设置存储的时间，Cookie将值存到内存。
如果Cookie存值时，设置存储的时间，Cookie将值存储到磁盘上长久存储。
6.1：优点：
6.1.1：减轻服务器的压力：将客户常用的但是不重要的信息存在客户端。
6.1.2：方便客户下次使用数据：因为存在客户端，所以当客户端第二个访问同一个应用，
可以快速获取上次数据。
6.2：缺点：
6.2.1：不安全。数据存在客户端。
6.2.2：依赖浏览器，大部分浏览支持在线的Cookie,只有个别浏览器支持离线Cookie.
6.3：将值存入cookie中：
eg://存储时间
var date1=new Date();
date1.setDate(date1.getTime()+10<em>60</em>1000);
//将用户名存入cookie中
document.cookie=&quot;uname=sx;expires=&quot;+date1.toGMTString();
//将密码存入cookie中
document.cookie=&quot;password123456;expires=&quot;+date1.toGMTString();
6.4：获取cookie中的值：
eg://将cookie中的值取出来
alert(document.cookie);
6.5：删除cookie中的值（实际是设置cookie失效）：
eg://删除cookie中的值，设置cookie失效
//存储时间
var date2=new Date();
date2.setDate(date2.getTime()-1);
//将用户名存入cookie中
document.cookie=&quot;uname=sx;expires=&quot;+date2.toGMTString();</p> <h2 id="_7-js中对象-js中所有事物都是对象。"><a href="#_7-js中对象-js中所有事物都是对象。" class="header-anchor">#</a> 7.Js中对象：js中所有事物都是对象。</h2> <p>对象的属性调用：对象.属性；
对象的方法调用：对象.方法();
7.1：系统对象：
7.1.1：String对象:专门用来处理字符串。
7.1.2：Array对象：处理数组。
7.1.3：Date对象:处理日期。
7.1.4：Math 对象：用于执行数学任务。
7.1.5：RegExp 对象：表示正则表达式，它是对字符串执行模式匹配的强大工具。
7.2：js中自定义对象：
7.2.1：自己创建对象
eg:var stu1=new Object();
stu1.sname=&quot;孙钱&quot;;
stu1.sage=20;
stu1.ssex=&quot;男&quot;;
alert(&quot;姓名：&quot;+stu1.sname);
7.2.2:Json对象：javascript object notation.
eg:var stu2={&quot;sname&quot;:&quot;老王&quot;,&quot;sage&quot;:18,&quot;ssex&quot;:'女'};
alert(&quot;年龄：&quot;+stu2.sage);
7.2.3：用构造方法创建对象：
eg://声明一个构造方法
function Student(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
}
var stu3=new Student(&quot;小波&quot;,28,&quot;女&quot;);
alert(&quot;性别：&quot;+stu3.sex);
7.2.4：js中所有对象都有prototype ，这个属性使您有能力向对象添加属性和方法。
添加属性的语法：对象.prototype.属性名=属性值；
添加方法的语法：对象.prototype.方法名=function(){代码；};
eg://声明一个构造方法
function Student(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
}
//给对象添加属性
Student.prototype.id=null;
//给对象添加方法
Student.prototype.show=function(){
alert(&quot;我是&quot;+this.name+&quot;,年龄：&quot;+this.age);
}
//用构造方法创建一个对象
var stu3=new Student(&quot;小波&quot;,28,&quot;女&quot;);
//stu3.id=1001;
stu3.show();
//alert(&quot;性别：&quot;+stu3.sex+&quot;,学号：&quot;+stu3.id);
8.去掉字符串的空格：
8.1：字符串对象.trim();
8.2: 字符串对象.replace(/(^\s*)|(\s*$)/g,&quot;&quot;);
eg://声明一个字符串
var s=&quot; 震飞飞 飞丰富 &quot;;
alert(s.length);
//第一种：去掉字符串的空格
//s=s.trim();
//alert(s.length);
//第二种：去掉字符串的空格
s=s.replace(/(^\s*)|(\s*$)/g,&quot;&quot;);
alert(s.length);</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/jgsrty/jgsrty.github.docs/edit/master/docs/english/2018/2018-November/Seize the Day.md" target="_blank" rel="noopener noreferrer">Edit this page</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">12/23/2020, 4:59:13 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/english/2018/2018-December/The Award-winning Speech.html" class="prev">
        js 正则表达式
      </a></span> <span class="next"><a href="/english/2018/2018-November/The Religion of a Doctor.html">
        Document Object Model DOM
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.2b0e3d52.js" defer></script><script src="/assets/js/2.87232f21.js" defer></script><script src="/assets/js/37.89852ede.js" defer></script>
  </body>
</html>
